import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class MainFrame extends StatefulWidget {
  const MainFrame({Key? key}) : super(key: key);

  @override
  State<MainFrame> createState() => _MainFrameState();
}

class _MainFrameState extends State<MainFrame> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade200,
      body: Column(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.white,
            child: SafeArea(
              child: Container(
                padding: EdgeInsets.only(left: 20, right: 20),
                margin: EdgeInsets.only(bottom: 15, top: 20),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(6),
                              child: SizedBox(
                                width: 55,
                                height: 55,
                                child: CachedNetworkImage(
                                  imageUrl:
                                      "https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                                  placeholder: (context, url) =>
                                      Container(color: Colors.grey.shade400),
                                  errorWidget: (context, url, error) =>
                                      Icon(Icons.error),
                                ),
                              ),
                            ),
                            SizedBox(width: 15),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text("Leo",
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 20)),
                                SizedBox(height: 5),
                                Text("微信号: xkxkkxkksa2",
                                    style: TextStyle(
                                      color: Colors.black.withOpacity(0.7),
                                      fontSize: 15,
                                    )),
                              ],
                            )
                          ],
                        ),
                        Row(
                          children: [
                            Icon(
                              Icons.qr_code,
                              color: Colors.grey.shade400,
                              size: 20,
                            ),
                            SizedBox(width: 10),
                            Icon(
                              Icons.keyboard_arrow_right,
                              color: Colors.grey.shade400,
                            )
                          ],
                        )
                      ],
                    ),
                    Container(
                      margin: const EdgeInsets.only(left: 64, top: 10),
                      child: Row(
                        children: [
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 7),
                            decoration: BoxDecoration(
                                border: Border.all(color: Colors.grey.shade400),
                                borderRadius: BorderRadius.circular(20)),
                            child: Row(
                              children: [
                                Icon(
                                  Icons.add,
                                  color: Colors.grey.shade400,
                                  size: 16,
                                ),
                                Text("状态",
                                    style: TextStyle(
                                      color: Colors.grey.shade400,
                                      fontSize: 12,
                                    )),
                              ],
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(2),
                            margin: EdgeInsets.only(left: 10),
                            decoration: BoxDecoration(
                                border: Border.all(color: Colors.grey.shade400),
                                shape: BoxShape.circle),
                            child: Text("···",
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 13,
                                )),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
            margin: EdgeInsets.only(
              top: 7,
              bottom: 7,
            ),
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(
                      Icons.security_sharp,
                      color: Color(0xFF5BE717),
                    ),
                    SizedBox(width: 10),
                    Text("服务",
                        style: TextStyle(color: Colors.black, fontSize: 18)),
                  ],
                ),
                Icon(
                  Icons.keyboard_arrow_right,
                  color: Colors.grey.shade400,
                )
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 15),
            color: Colors.white,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(
                  Icons.collections_outlined,
                  color: Colors.orangeAccent,
                ),
                Expanded(
                    child: Container(
                  decoration: BoxDecoration(
                      border:
                          Border(bottom: BorderSide(color: Colors.black12))),
                  padding: EdgeInsets.only(left: 10, bottom: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("收藏",
                          style: TextStyle(color: Colors.black, fontSize: 18)),
                      Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.grey.shade400,
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 15),
            color: Colors.white,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(
                  Icons.wechat_rounded,
                  color: Colors.red,
                ),
                Expanded(
                    child: Container(
                  decoration: BoxDecoration(
                      border:
                          Border(bottom: BorderSide(color: Colors.black12))),
                  padding: EdgeInsets.only(left: 10, bottom: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("朋友圈",
                          style: TextStyle(color: Colors.black, fontSize: 18)),
                      Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.grey.shade400,
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 15),
            color: Colors.white,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(
                  Icons.video_camera_back_outlined,
                  color: Colors.blue,
                ),
                Expanded(
                    child: Container(
                  decoration: BoxDecoration(
                      border:
                          Border(bottom: BorderSide(color: Colors.black12))),
                  padding: EdgeInsets.only(left: 10, bottom: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("视频号",
                          style: TextStyle(color: Colors.black, fontSize: 18)),
                      Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.grey.shade400,
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 15),
            color: Colors.white,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(
                  Icons.sports_baseball,
                  color: Colors.deepPurple,
                ),
                Expanded(
                    child: Container(
                  decoration: BoxDecoration(
                      border:
                          Border(bottom: BorderSide(color: Colors.black12))),
                  padding: EdgeInsets.only(left: 10, bottom: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("卡包",
                          style: TextStyle(color: Colors.black, fontSize: 18)),
                      Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.grey.shade400,
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 15),
            color: Colors.white,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(
                  Icons.emoji_emotions_outlined,
                  color: Colors.orange,
                ),
                Expanded(
                    child: Container(
                  padding: EdgeInsets.only(left: 10, bottom: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("表情",
                          style: TextStyle(color: Colors.black, fontSize: 18)),
                      Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.grey.shade400,
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
            margin: EdgeInsets.only(
              top: 7,
              bottom: 7,
            ),
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(
                      Icons.settings,
                      color: Colors.blue,
                    ),
                    SizedBox(width: 10),
                    Text("设置",
                        style: TextStyle(color: Colors.black, fontSize: 18)),
                  ],
                ),
                Icon(
                  Icons.keyboard_arrow_right,
                  color: Colors.grey.shade400,
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
